<template>
  <div class="page-box">
    <div class="page">
      <div class="select-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!--<el-tab-pane label="未开票" name="first"></el-tab-pane>-->
          <el-tab-pane label="待开票" :name="1"></el-tab-pane>
          <el-tab-pane label="已开票" :name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <!--列表-->
      <div class="list-box">
        <el-table
            :header-cell-style="{ 'backgroundColor': 'rgb(246, 246, 246)'}"
            :data="tableList">
          <el-table-column prop="order_no" label="订单号" width="200"></el-table-column>
          <el-table-column prop="invoice_price" label="订单总金额" width="180"></el-table-column>
          <el-table-column prop="invoice_header" label="发票抬头"></el-table-column>
          <el-table-column prop="invoice_code" label="税号"></el-table-column>
          <el-table-column prop="created_at" label="申请时间"></el-table-column>
          <!--<el-table-column prop="confirm_time" label="完成时间"></el-table-column>-->
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <a v-if="scope.row.pic_list" :href="scope.row.pic_list" class="download-text">下载</a>
              <!--<el-button v-if="scope.row.is_invoice==0" @click="openDialog(scope.row)">发票申请</el-button>-->
              <!--{{ scope.row }}-->
            </template>
          </el-table-column>
        </el-table>
        <!--{{ modelList }}-->
      </div>

      <div class="pagination-box">
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :total="total"/>
      </div>
    </div>

  </div>

  <el-dialog v-model="dialogStatus">
    <div>
      <el-form v-model="invoiceForm">
        <el-form-item lable="订单号">
          <el-input v-model="invoiceForm.order_no"></el-input>
        </el-form-item>
        <el-form-item lable="类型">
          <el-input v-model="invoiceForm.type"></el-input>
        </el-form-item>
        <el-form-item lable="发票抬头">
          <el-input v-model="invoiceForm.invoice_header"></el-input>
        </el-form-item>
        <el-form-item lable="税号">
          <el-input v-model="invoiceForm.invoice_code"></el-input>
        </el-form-item>
        <el-form-item lable="发票金额">
          <el-input v-model="invoiceForm.invoice_price" disabled></el-input>
        </el-form-item>
        <el-form-item lable="发票金额">
          <el-button @click="invoiceSubmit">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import Https from "@/server";
import type { TabsPaneContext } from 'element-plus'

const activeName = ref(1)
const dialogStatus = ref(false)

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)

  getPageList();
}

const tableList = ref([]);
const total = ref(0);
const invoiceForm = reactive({
  order_no: "",
  type: 1,
  invoice_header: "",
  invoice_code: "",
  invoice_price: "",
});

const formData = reactive({
  keyword: "",
  pageNum: 1,
})

const getPageList = () => {
  let data = {
    status: activeName.value,
    pageNum: formData.pageNum,
  };
  Https.getInvoiceList(data).then((res: any) => {
    if (res.code === 0) {
      tableList.value = res.data.list;
      total.value = res.data.pagination.total_count;
    }
  })
}


// 分页跳转
const handleCurrentChange = (val: number) => {
  formData.pageNum = val;
}

const invoiceSubmit = ()=>{
  Https.postInvoiceSubmit(invoiceForm).then((res:any) => {
    console.log(res)
  })
}

onMounted(()=>{
  getPageList();
  // getOrderList();
})

</script>
<style scoped lang="scss">
.page-box{
  height: 100%;

  .page{
    position: relative;
    padding: 0 28px 10px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: transparent;
    color: var(--text-color);
  }
}

.tabs{
  padding: 0;
  height: 40px;

  .tab{
    width: 120px;
    font-size: 15px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 36px;
    padding: 0 10px;
    color: var(--text-gray-color);
    background-color: #e9ebf1;
    cursor: pointer;
    margin-top: 3px;
  }

  .tab.active{
    background-color: #fff;
    color: var(--el-color-primary);
    cursor: auto;
    font-size: 16px;
    line-height: 40px;
    margin-top: 0;
  }
}


.list-box {
  padding: 40px 20px 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  height: 668px;
}

.list-item {
  width: 20%;
  padding: 0 16px;
  margin-bottom: 30px;
}

//分页
.pagination-box {
  padding: 20px 20px 0;
  display: flex;
  justify-content: flex-end;
}

.download-text{
  color: #4d86ac;
  //text-decoration: #e9ebf1;
}
</style>